<template>
	<view class="publisher-page">
		<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/adeceeabcdcffecabfbdebrnku_afcol1658546917296.png" class="top-bg" mode="aspectFill"></image>
		<image src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/adeceeabcdcffecabfbdebrnku_afcol1658546917296.png" class="publisher-header"></image>
		<view class="top">
			<view class="top-num">职位2</view>
			<view class="top-name">
				<view class="name">陈大壮</view>
				<view class="">广东广州</view>
			</view>
			<view class="top-job">创听科技 · 行政</view>
		</view>
		<view class="company-bpx">
			<view class="title">目前任职</view>
			<view class="company-flex">
				<image class="logo"></image>
				<view class="company-flex-msg" @tap="toCompany">
					<view class="">广州创听科技有限公司</view>
					<view class="">不需要融资 · 0-20人·移动互联网</view>
				</view>
				<image style="width: 40rpx;height: 40rpx;" src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/right_angle_right_wmqir1658546916894.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="job-box">
			<view class="title">职位2</view>
			<view class="job-list">
				<view class="job-list-title">
					<view class="job-list-name">UI设计师</view>
					<view class="job-list-k">7-8K</view>
				</view>
				<view class="job-list-msg">广州 海珠区 琶洲 · 1-3年 · 大专</view>
			</view>
			<view class="job-list">
				<view class="job-list-title">
					<view class="job-list-name">UI设计师</view>
					<view class="job-list-k">7-8K</view>
				</view>
				<view class="job-list-msg">广州 海珠区 琶洲 · 1-3年 · 大专</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			toCompany(){
				uni.navigateTo({
					url:"/pages/job_wanted/company/detail"
				})
			},
		}
	}
</script>

<style lang="scss">
	.publisher-page{
		.top-bg{
			height: 300rpx;
			width: 100%;
		}
		.publisher-header{
			position: absolute;
			top: 200rpx;
			left: 34rpx;
			width: 148rpx;
			height: 148rpx;
			border-radius: 50%;
			border: 4rpx solid #FFFFFF;
		}
		.top{
			padding: 20rpx 32rpx 40rpx;
			.top-num{
				text-align: right;
			}
			.top-name{
				display: flex;
				font-size: 28rpx;
				align-items: center;
				.name{
					font-size: 40rpx;
					font-family: Source Han Sans SC-Medium, Source Han Sans SC;
					font-weight: 500;
					color: #323233;
					margin-right: 32rpx;
				}
			}
			.top-job{
				font-size: 26rpx;
				font-family: Source Han Sans SC-Regular, Source Han Sans SC;
				font-weight: 400;
				color: #666666;
				margin-top: 24rpx;
			}
		}
		.company-bpx{
			border-top: 1px solid #DDDDDD;
			padding: 40rpx 32rpx;
			.title{
				font-size: 32rpx;
				font-family: Source Han Sans SC-Medium, Source Han Sans SC;
				font-weight: 500;
				color: #323233;
			}
			.company-flex{
				display: flex;
				margin-top: 30rpx;
				align-items: center;
				.logo{
					width: 88rpx;
					height: 88rpx;
					margin-right: 28rpx;
				}
				.company-flex-msg{
					flex: 1;
				}
			}
		}
		.job-box{
			border-top: 1px solid #DDDDDD;
			padding: 40rpx 32rpx;
			.title{
				font-size: 32rpx;
				font-family: Source Han Sans SC-Medium, Source Han Sans SC;
				font-weight: 500;
				color: #323233;
			}
			.job-list{
				margin-top: 40rpx;
				.job-list-title{
					display: flex;
					justify-content: space-between;
				}
				.job-list-name{
					font-size: 32rpx;
					font-family: Source Han Sans SC-Medium, Source Han Sans SC;
					font-weight: 500;
				}
				.job-list-k{
					font-size: 32rpx;
					font-family: Source Han Sans SC-Medium, Source Han Sans SC;
					font-weight: 500;
					color: #71B9F8;
				}
				.job-list-msg{
					margin-top: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>